<template>
  <div>
    <!-- 标题区域 -->
    <div class="i_t mar_10">
      <span class="fl t_color">{{ title }}</span>
      <span class="i_mores fr">
        <template v-for="(link, index) in links" :key="index">
          <a href="#">{{ link }}</a>
          <span v-if="index < links.length - 1">&nbsp; &nbsp; | &nbsp; &nbsp;</span>
        </template>
      </span>               
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
      <!-- 左侧轮播 -->
      <div :class="getBannerClass()">
        <div :id="getBannerPlayId()">
          <ul class="imgs" :id="getBannerActorId()">
            <li v-for="(banner, index) in bannerImages" :key="index">
              <a href="#"><img :src="banner" width="228" height="418" /></a>
            </li>
          </ul>
          <div :class="getPrevClass()">上一张</div>
          <div :class="getNextClass()">下一张</div>
        </div>        
      </div>
      
      <!-- 右侧商品列表 -->
      <div class="milk_right">
        <ul>
          <li v-for="product in products" :key="product.id">
            <div class="img">
              <a href="#"><img :src="product.image" width="185" height="155" /></a>
            </div>
            <div class="name">
              <a href="#">{{ product.name }}</a>
            </div>
            <div class="price">
              <span style="color: #ff4e00;">￥<span>{{ product.price }}</span></span> &nbsp; {{ product.points }}R
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductSection',
  props: {
    title: {
      type: String,
      required: true
    },
    links: {
      type: Array,
      default: () => []
    },
    bannerImages: {
      type: Array,
      default: () => []
    },
    products: {
      type: Array,
      default: () => []
    },
    sectionId: {
      type: String,
      required: true
    }
  },
  methods: {
    getBannerClass() {
      return `${this.sectionId}_ban`
    },
    getBannerPlayId() {
      return `imgPlay${this.sectionId}`
    },
    getBannerActorId() {
      return `actor${this.sectionId}`
    },
    getPrevClass() {
      return `prev${this.sectionId}`
    },
    getNextClass() {
      return `next${this.sectionId}`
    }
  }
}
</script>

<style>

</style>